<template>
	<view>
		<view class="list">
			<view class="item">
				<view class="title">
					头像
				</view>
				<image :src="info.avatar" class="avatar" mode=""></image>
			</view>
			<button class="nostyle row" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">
				<view class="item">
					<view class="title">
						手机号
					</view>
					<view class="value">
						{{info.phone}}
					</view>
					<uni-icon type="arrowright" color="#8B8B8B" size="20"></uni-icon>
				</view>
			</button>
			<view class="item" @click="setName(0)">
				<view class="title">
					昵称
				</view>
				<view class="value">
					{{info.nickname}}
				</view>
				<uni-icon type="arrowright" color="#8B8B8B" size="20"></uni-icon>
			</view>
			<view class="item" @click="setName(1)">
				<view class="title">
					姓名
				</view>
				<view class="value">
					{{info.realname}}
				</view>
				<uni-icon type="arrowright" color="#8B8B8B" size="20"></uni-icon>
			</view>
			<picker mode="date" @change="setBirthday">
				<view class="item">
					<view class="title">
						生日
					</view>
					<view class="value">
						{{info.birthday}}
					</view>
					<uni-icon type="arrowright" color="#8B8B8B" size="20"></uni-icon>
				</view>
			</picker>
			<picker mode="selector" :range="sexArr" @change="setSex">
				<view class="item">
					<view class="title">
						性别
					</view>
					<view class="value">
						{{sexArr[info.sex]}}
					</view>
					<uni-icon type="arrowright" color="#8B8B8B" size="20"></uni-icon>
				</view>
			</picker>
		</view>
	</view>
</template>

<script>
	import uniIcon from '../../../components/uni-icon.vue'
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				info:{},
				sexArr:["男","女"],
			};
		},
		onShow:function(){
			this.getInfo();
		},
		methods:{
			getPhoneNumber:function(e){
				var that=this;
				console.log(e);
				uni.login({
					provider:"weixin",
					success:function(res) {
						if(e.detail.errMsg=="getPhoneNumber:ok"){
							that.ajax("/user/set_phone_number/",{
								token:uni.getStorageSync("token"),
								code:res.code,
								iv:e.detail.iv,
								data:e.detail.encryptedData
							},function(res){
								uni.showToast({
									title:"设置成功",
									icon:"success"
								});
								that.getInfo();
							});
						}else{
							uni.showToast({
								icon:"none",
								title:"请授权获取您的手机号码",
							})
						}
					}
				})
				
			},
			setName:function(type){
				if(type==0){
					var name=this.info.nickname;
				}else{
					var name=this.info.realname;
				}
				uni.navigateTo({
					url:"/pages/user/nickname/nickname?type="+type+"&name="+name,
				})
			},
			setBirthday:function(e){
				var that=this;
				uni.showLoading({
					title:"提交中",
				})
				that.ajax("/user/birthday",{
					token:uni.getStorageSync("token"),
					birthday:e.detail.value,
				},function(res){
					uni.showToast({
						title:"设置成功",
						icon:"success"
					})
					that.info.birthday=e.detail.value;
				});
				
			},
			setSex:function(e){
				var that=this;
				uni.showLoading({
					title:"提交中",
				});
				that.ajax("/user/sex",{
					token:uni.getStorageSync("token"),
					sex:parseInt(e.detail.value)+1,
				},function(res){
					uni.showToast({
						title:"设置成功",
						icon:"success"
					})
					that.info.sex=e.detail.value;
				});
			},
			getInfo:function(){
				var that=this;
				that.ajax("/user/profile",{
					token:uni.getStorageSync("token"),
				},function(res){
					that.info=res.data.data;
				});
			}
		}
	}
</script>

<style>
	.list{
		margin: 28upx;
		padding:28upx 20upx;
		background: #ffffff;
		box-shadow:0px 2px 20px 0px rgba(43,159,133,0.14);
		border-radius:12px;
	}
	.item{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		padding: 18upx 20upx;
	}
	.title{
		font-size: 28upx;
		color: #4B4B4B;
		flex: 1;
		text-align: left;
	}
	.value{
		font-size: 28upx;
		color: #8B8B8B;
	}
	.avatar{
		width: 58upx;
		height: 58upx;
		border-radius: 50%;
	}
</style>
